import React from 'react';
import {NavLink,Outlet,useNavigate} from "react-router-dom";

function My(props) {
    const navigate = useNavigate()
    return (
        <div>
            <h3>个人中心</h3>
            {/*完整路径*/}
            {/*<NavLink to={'/my/cart'}>购物车 </NavLink>*/}
            {/*<NavLink to={'/my/collect'}> 我的收藏</NavLink>*/}

            {/*相对路径*/}
            {/*<NavLink to={'cart'}>购物车 </NavLink>*/}
            {/*<NavLink to={'collect'}> 我的收藏</NavLink>*/}


            {/*路由传参*/}
            {/*第一种*/}
            <NavLink to={'cart?a=1&b=2'}>购物车1 </NavLink>
            {/*第二种*/}
            <NavLink to={{pathname:'cart?a=10&b=20'}}>购物车2 </NavLink>
            {/*第三种*/}
            <NavLink to={{pathname:'cart',search:'a=100&b=200'}}>购物车3 </NavLink>
            <NavLink to={'collect'}> 我的收藏</NavLink>

            {/*编程式导航传递参数*/}
            <div>
                {/*方案一*/}
                <button onClick={()=>navigate('cart?a=9&b=99')}>点击跳转到Cart1</button>
                {/*方案二*/}
                <button onClick={()=>navigate({pathname:'cart',search:'a=99&b=999'})}>点击跳转到Cart2</button>
            </div>
            <hr/>
            <Outlet/>
        </div>
    );
}

export default My;